@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "入职审核";
    Layout = null;
}
<link href="~/layui/css/layui.css" rel="stylesheet" />
<script src="~/layui/layui.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>入职审核管理</title>
</head>
<body>
    <div class="layui-container" style="margin: 15px;">
        <!-- 搜索区域 -->
        <div class="layui-row layui-form">
            <div class="layui-col-md12">
                <div class="layui-inline">
                    <label class="layui-form-label">人员名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="personName" placeholder="请输入人员名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">面试官</label>
                    <div class="layui-input-inline">
                        <input type="text" name="interviewPeople" placeholder="请输入面试官姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="search">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="reset">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </div>

        <!-- 工具栏 -->
        <div class="layui-row" style="margin-top: 15px;">
            <div class="layui-col-md12">
                <button class="layui-btn layui-btn-normal" id="exportBtn">
                    <i class="layui-icon layui-icon-export"></i> 导出Excel
                </button>
            </div>
        </div>

        <!-- 表格 -->
        <table id="jobReviewTable" lay-filter="jobReviewTable"></table>
    </div>

    <!-- 操作列模板 -->
    <script type="text/html" id="operationTpl">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="viewInterview">
            <i class="layui-icon layui-icon-form"></i>查看详情
        </a>
        {{# if(d.interviewResult === '1'){ }}
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="review">
            <i class="layui-icon layui-icon-ok"></i>审核
        </a>
        {{# } }}
    </script>

    <!-- 性别模板 -->
    <script type="text/html" id="sexTpl">
        {{#  if(d.sex === 0){ }}
            <span class="layui-badge layui-bg-blue">男</span>
        {{#  } else { }}
            <span class="layui-badge layui-bg-orange">女</span>
        {{#  } }}
    </script>

    <!-- 查看面试弹框模板 -->
    <script type="text/html" id="viewInterviewTpl">
        <div class="view-interview-container">
            <form class="layui-form" lay-filter="viewInterviewForm">
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">人员姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="personName" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">联系电话</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="0" title="男" disabled>
                                <input type="radio" name="sex" value="1" title="女" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">定级</label>
                            <div class="layui-input-block">
                                <input type="text" name="gradingMatch" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">面试次数</label>
                            <div class="layui-input-block">
                                <input type="text" name="interviewNumber" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">面试结果</label>
                            <div class="layui-input-block">
                                <input type="text" name="interviewResult" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">面试时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="interviewTime" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">面试官</label>
                            <div class="layui-input-block">
                                <input type="text" name="interviewPeople" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">面试反馈</label>
                    <div class="layui-input-block">
                        <textarea name="interviewFeedback" class="layui-textarea" readonly></textarea>
                    </div>
                </div>
            </form>
        </div>
    </script>
    
    <!-- 审核弹框模板 -->
    <script type="text/html" id="reviewTpl">
        <div class="review-container">
            <form class="layui-form" lay-filter="reviewForm">
                <input type="hidden" name="id" value="">
                
                <div class="layui-form-item">
                    <label class="layui-form-label">人员姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="personName" class="layui-input" readonly>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">审核结果</label>
                    <div class="layui-input-block">
                        <input type="radio" name="reviewResult" value="1" title="通过" checked>
                        <input type="radio" name="reviewResult" value="0" title="不通过">
                    </div>
                </div>
                
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">审核意见</label>
                    <div class="layui-input-block">
                        <textarea name="reviewComment" placeholder="请输入审核意见" class="layui-textarea"></textarea>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="submitReview">提交审核</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </script>
    
    <script>
        layui.use(['table', 'form', 'layer', 'jquery'], function(){
            var table = layui.table,
                form = layui.form,
                layer = layui.layer,
                $ = layui.jquery;

            // 表格实例
            table.render({
                elem: '#jobReviewTable',
                url: '/JobApplication/JobReviewPageList',
                method: 'get',
                page: true,
                request: {
                    pageName: 'pageIndex',
                    limitName: 'pageSize'
                },
                cols: [[ // 表头
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'personName', title: '人员名称', width: 120},
                    {field: 'phone', title: '联系电话', width: 120},
                    {field: 'sex', title: '用户性别', width: 100, templet: '#sexTpl'},
                    {field: 'gradingMatch', title: '定级', width: 120},
                    {field: 'interviewFeedback', title: '面试反馈', width: 120},
                    {field: 'interviewResult', title: '面试结果', width: 120, templet: function(d){
                        if(d.interviewResult === '1') {
                            return '<span class="layui-badge layui-bg-blue">面试</span>';
                        } else if(d.interviewResult === '2') {
                            return '<span class="layui-badge layui-bg-green">通过</span>';
                        } else if(d.interviewResult === '3') {
                            return '<span class="layui-badge layui-bg-red">不通过</span>';
                        } else {
                            return d.interviewResult || '';
                        }
                    }},
                    {field: 'interviewTime', title: '面试时间', width: 160, templet: function(d){
                        if(d.interviewTime){
                            var date = new Date(d.interviewTime);
                            return date.getFullYear() + '-' + 
                                   String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                                   String(date.getDate()).padStart(2, '0') + ' ' + 
                                   String(date.getHours()).padStart(2, '0') + ':' + 
                                   String(date.getMinutes()).padStart(2, '0') + ':' + 
                                   String(date.getSeconds()).padStart(2, '0');
                        }
                        return '';
                    }},
                    {field: 'interviewPeople', title: '面试官', width: 100},
                    {title: '操作', width: 180, toolbar: '#operationTpl', fixed: 'right'}
                ]],
                limits: [10, 20, 30, 50],
                limit: 10
            });

            // 监听搜索
            form.on('submit(search)', function(data){
                table.reload('jobReviewTable', {
                    where: {
                        personName: data.field.personName,
                        interviewPeople: data.field.interviewPeople
                    },
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            // 监听重置
            form.on('submit(reset)', function(data){
                // 清空搜索框的值
                document.getElementsByName('personName')[0].value = '';
                document.getElementsByName('interviewPeople')[0].value = '';
                
                // 重新加载表格，重置到第一页
                table.reload('jobReviewTable', {
                    where: {
                        personName: '',
                        interviewPeople: ''
                    },
                    page: {
                        curr: 1
                    }
                });
                
                // 重新渲染表单
                form.render();
                return false;
            });

            // 监听工具条事件
            table.on('tool(jobReviewTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'viewInterview'){
                    // 打开查看面试弹框
                    layer.open({
                        type: 1,
                        title: '查看申请详情',
                        area: ['600px', '800px'],
                        content: $('#viewInterviewTpl').html(),
                        success: function(layero, index){
                            // 设置表单值
                            form.val('viewInterviewForm', data);
                            // 格式化面试时间
                            if(data.interviewTime) {
                                var date = new Date(data.interviewTime);
                                var formattedDate = date.getFullYear() + '-' + 
                                    String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                                    String(date.getDate()).padStart(2, '0') + ' ' + 
                                    String(date.getHours()).padStart(2, '0') + ':' + 
                                    String(date.getMinutes()).padStart(2, '0') + ':' + 
                                    String(date.getSeconds()).padStart(2, '0');
                                layero.find('input[name="interviewTime"]').val(formattedDate);
                            }
                            
                            // 格式化面试结果
                            if(data.interviewResult) {
                                var resultText = '';
                                switch(data.interviewResult) {
                                    case '1':
                                        resultText = '面试';
                                        break;
                                    case '2':
                                        resultText = '通过';
                                        break;
                                    case '3':
                                        resultText = '不通过';
                                        break;
                                    default:
                                        resultText = data.interviewResult;
                                }
                                layero.find('input[name="interviewResult"]').val(resultText);
                            }
                            
                            // 重新渲染表单
                            form.render('radio');
                        }
                    });
                } else if(obj.event === 'review'){
                    // 确保只有面试状态的记录才能审核
                    if(data.interviewResult !== '1') {
                        layer.msg('只有面试状态的记录可以进行审核操作', {icon: 2});
                        return;
                    }
                    
                    // 打开审核弹框
                    layer.open({
                        type: 1,
                        title: '入职审核',
                        area: ['500px', '500px'],
                        content: $('#reviewTpl').html(),
                        success: function(layero, index){
                            // 设置表单初始值
                            form.val('reviewForm', {
                                'id': data.id,
                                'personName': data.personName,
                                'reviewResult': '1' // 默认通过
                            });
                            
                            // 监听审核表单提交
                            form.on('submit(submitReview)', function(formData){
                                // 获取表单数据
                                var id = formData.field.id;
                                var reviewResult = formData.field.reviewResult; // 1=通过，0=不通过
                                var reviewComment = formData.field.reviewComment;
                                
                                // 提交审核结果
                                $.ajax({
                                    url: '/JobApplication/UpdateReviewResult',
                                    type: 'POST',
                                    data: {
                                        id: id,
                                        reviewResult: reviewResult,
                                        reviewComment: reviewComment
                                    },
                                    success: function(res) {
                                        if(res.success) {
                                            layer.msg('审核提交成功！', {icon: 1});
                                            layer.close(index);
                                            // 刷新表格
                                            table.reload('jobReviewTable');
                                        } else {
                                            layer.msg('审核提交失败：' + res.message, {icon: 2});
                                        }
                                    },
                                    error: function(xhr) {
                                        layer.msg('审核提交失败，请重试', {icon: 2});
                                        console.error('审核提交错误:', xhr);
                                    }
                                });
                                
                                return false;
                            });
                            
                            // 重新渲染表单
                            form.render();
                        }
                    });
                }
            });

            // 导出按钮事件
            $('#exportBtn').on('click', function(){
                // 显示加载层
                var loadIndex = layer.load(1, {
                    shade: [0.3, '#fff']
                });
                
                try {
                    // 获取查询参数
                    var personName = $('input[name="personName"]').val() || '';
                    var interviewPeople = $('input[name="interviewPeople"]').val() || '';
                    
                    // 构建导出URL
                    var url = '/JobApplication/ExportReviewToExcel?personName=' + encodeURIComponent(personName) + '&interviewPeople=' + encodeURIComponent(interviewPeople);
                    
                    // 直接使用window.location.href导航到导出URL
                    window.location.href = url;
                    
                    // 关闭加载层并提示成功
                    setTimeout(function() {
                        layer.close(loadIndex);
                        layer.msg('导出成功', {icon: 1});
                    }, 1000);
                } catch (error) {
                    layer.close(loadIndex);
                    layer.msg('导出失败：' + error, {icon: 2});
                }
            });
        });
    </script>

    <style>
        .layui-form-label {
            width: 100px;
        }
        .layui-input-inline {
            width: 200px;
        }
        .layui-container {
            padding: 15px;
            background-color: #fff;
        }
        /* 弹出框样式 */
        .view-interview-container,
        .review-container {
            padding: 20px;
            background-color: #fff;
        }
        .view-interview-container .layui-form-item,
        .review-container .layui-form-item {
            margin-bottom: 15px;
        }
        .view-interview-container .layui-input-block,
        .review-container .layui-input-block {
            margin-left: 110px;
            width: auto;
            min-height: 36px;
        }
        .view-interview-container .layui-input,
        .review-container .layui-input {
            background-color: #f8f8f8;
            border: 1px solid #e6e6e6;
        }
        .view-interview-container .layui-textarea,
        .review-container .layui-textarea {
            min-height: 120px;
            background-color: #f8f8f8;
            border: 1px solid #e6e6e6;
        }
        .view-interview-container .layui-form-label,
        .review-container .layui-form-label {
            color: #666;
            font-weight: bold;
        }
        .view-interview-container .layui-row,
        .review-container .layui-row {
            margin-bottom: 10px;
        }
        .view-interview-container .layui-input[readonly],
        .view-interview-container .layui-textarea[readonly] {
            cursor: default;
            color: #666;
        }
    </style>
</body>
</html> 